<template>
	<div class="editor-container layout-pd">
        <el-form ref="form" :model="state.form"  label-width="140px">
            <el-form-item label="商品详情：">
                <section style="max-width: 1400px;">
                    <Editor v-model:get-html="state.form.htmlVal" v-model:get-text="state.form.textVal"  :disable="state.form.disable" />
                </section>
            </el-form-item>
		</el-form>
        <section style="text-align: center; margin: 50px 0;">
            <el-button type="primary" size="large" @click="previousStep">上一步</el-button>
            <el-button type="primary" size="large" @click="nextStep">下一步</el-button>
        </section>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { defineAsyncComponent, reactive } from 'vue';
import type { TStep } from '../add.vue'

const emit = defineEmits<{
	stepChange: [step: TStep] 
}>()
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));

// 定义变量内容
const state = reactive({
    form:{
		htmlVal: '',
		textVal: '',
		disable: false,
    }
	
});


const previousStep = () => {
    emit('stepChange', 'first')
}

const nextStep = () => {
    emit('stepChange', 'third')
}
</script>
